<template>
  <div class="warp1" style="background: #000; width: 100%;height: 100vh" @click="handleClick($event)">
    <div style="position: absolute;">
      <div class="warp" v-show="warpVisible" ref="warp" style="position: absolute;"
        :style="{ left: warpLeft + 'px', top: warpTop + 'px' }">
        <div class="rc-trigger-popup" style="position: relative; left: 0px; top: 3px;">
          <div style="">
            <div id="duchamp-popover-point" style="position: absolute; height: 34px; transform: translate(-50%, -50%);">
              <div><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="34px"
                  height="34px" viewBox="0 0 34 34" version="1.1" :style="{ color: editsCss.svgLineColor }"
                  class="injected-svg"
                  data-src="/decision/view/duchamp/resource?resource=/com/fr/plugin/wysiwyg/web/assets/system/popover_action_point.svg&amp;tag=ea5c8ce0f8408aa9dc809c7bdeea45368b3e3582">
                  <defs>
                    <radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="50%" id="radialGradient-1-42">
                      <stop stop-color="currentcolor" stop-opacity="0" offset="0%"></stop>
                      <stop stop-color="currentcolor" stop-opacity="0" offset="68.9985795%"></stop>
                      <stop stop-color="currentcolor" stop-opacity="0.4" offset="92.0941521%"></stop>
                      <stop stop-color="currentcolor" stop-opacity="0.8" offset="100%"></stop>
                    </radialGradient>
                    <circle id="path-2" cx="17" cy="17" r="5"></circle>
                    <filter x="-60.0%" y="-60.0%" width="220.0%" height="220.0%" filterUnits="objectBoundingBox"
                      id="filter-3-41">
                      <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
                      <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1">
                      </feGaussianBlur>
                      <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix"
                        in="shadowBlurOuter1"></feColorMatrix>
                    </filter>
                  </defs>
                  <g id="画板" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="编组备份">
                      <circle id="椭圆形" fill="url(#radialGradient-1-42)" cx="17" cy="17" r="17"></circle>
                      <circle id="椭圆形" fill="currentcolor" opacity="0.6" cx="17" cy="17" r="10"></circle>
                      <g id="椭圆形">
                        <use fill="currentcolor" fill-opacity="1" filter="url(#filter-3-41)" xlink:href="#path-2"></use>
                        <use fill="currentcolor" fill-rule="evenodd" xlink:href="#path-2"></use>
                      </g>
                    </g>
                  </g>
                </svg></div>
            </div>
            <svg id="duchamp-popover-line" xmlns="http://www.w3.org/2000/svg" width="180" height="134.07227916684863"
              viewBox="0 0 180 134.07227916684863" style="position: absolute; pointer-events: none; top: -134px;"
              :style="{ color: editsCss.svgLineColor }">
              <polyline id="duchamp-popover-polyline" points="0,134.07227916684863 112.5,0 180,0" fill="none"
                stroke="#ffe1b9"></polyline>
            </svg>
            <div id="duchamp-popover-body" ref='warp_bottom1'
              style=" width: 450px; height: 210px;position: absolute;left: 190px;top: -247px; ">
              <div class="duchamp-custom-iframe-wrapper">
                <div class="p-absolute"
                  style="opacity: 0.85; filter: hue-rotate(0deg); border-color: transparent; border-image-source: url('https://finemaxdemo.fanruan.com/decision/view/duchamp/resource/preview?tplPath=reportlets%252Ffvs%252F%25E6%2599%25BA%25E6%2585%25A7%25E5%25B7%25A5%25E5%258E%2582%25E8%25BF%2590%25E8%2590%25A5%25E7%25AE%25A1%25E6%258E%25A7%25E5%25B9%25B3%25E5%258F%25B0%252F%25E6%2599%25BA%25E6%2585%25A7%25E5%25B7%25A5%25E5%258E%2582%25E8%25BF%2590%25E8%2590%25A5%25E7%25AE%25A1%25E6%258E%25A7%25E5%25B9%25B3%25E5%258F%25B0.fvs&resource=2ec1829b-b281-43a4-ba1b-a269c30f13bb.png'); border-width: 93px 110px; border-style: solid; border-image-slice: 93 110 fill; border-image-repeat: stretch; transform: translateZ(0px) perspective(1px);">
                  <div style="padding: 20px;"></div>
                  <div style="position: absolute;left: -35px; top: -25px; width: 350px;">
                    <ul>
                      <li>
                        <div class="list-item">
                          <span class="triangle" ref="triangleElements"></span>
                          <div class="leftdiv" ref="triangleElements1">
                            <span>主营业务: <span style="width: 100%; color:#ffe1b9;">原油开采</span></span>
                          </div>
                        </div>
                      </li>
                      <li>
                        <div class="list-item">
                          <span class="triangle" ref="triangleElements"></span>
                          <div class="leftdiv" ref="triangleElements1">
                            <span>成立时间: <span style="width: 100%; color:#ffe1b9;">1987年12月12日</span></span>
                          </div>
                        </div>
                      </li>
                      <li>
                        <div class="list-item">
                          <span class="triangle" ref="triangleElements"></span>
                          <div class="leftdiv" ref="triangleElements1">
                            <span>矿权面积: <span style="width: 100%; color:#ffe1b9;">{{ info.area }}万</span></span>
                          </div>
                        </div>
                      </li>
                      <li>
                        <div class="list-item">
                          <span class="triangle" ref="triangleElements"></span>
                          <div class="leftdiv" ref="triangleElements1">
                            <span>矿权面积：<span style="width: 100%; color:#ffe1b9;">{{ info.size }}万平方公里</span></span>
                          </div>
                        </div>
                      </li>
                      <li>
                        <div class="list-item">
                          <span class="triangle" ref="triangleElements"></span>
                          <div class="leftdiv" ref="triangleElements1">
                            <span>井站信息：<span style="width: 100%; color:#ffe1b9;">油井{{ info.youjin }} 气井{{ info.qijin
                            }}</span></span>
                          </div>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PuppyList',
  data() {
    return {
      warpLeft: 0,
      warpTop: 0,
      warpVisible: false,
      info: {
        title: "标题",
        area: '1000',
        size: '1000',
        youjin: '123456',
        qijin: '7890',

      },
      editsCss: {
        svgLineColor: "#ffe1b9",
        lineClolr: "#ffe1b9",
        leftdiv: "#ffe1b9"
      },
    }
  },
  methods: {
    init(colors, info) {
      if (colors && typeof colors === 'object') {
        Object.keys(colors).forEach(key => {
          this.editsCss[key] = colors[key];
        });
      }
      this.setData(info);
    },
    setData(info) {
      if (info && typeof info === 'object') {
        Object.keys(info).forEach(key => {
          this.info[key] = info[key];
        });
      }
    },
    handleClick(event) {
      var clickX = event.clientX;
      var clickY = event.clientY;
      var screenWidth = window.innerWidth;
      //某个div得
      // var divWidth = this.$refs.div.clientWidth;
      var distanceToRight = screenWidth - clickX;
      var distanceToTop = clickY;
      this.warpLeft = clickX;
      this.warpTop = clickY;
      this.warpVisible = false;
      // 根据点击位置调整样式或其他逻辑
      if (distanceToRight < 500 && distanceToTop > 300) {
        this.$nextTick(() => {
          this.$refs.warp_bottom1.style.transform = 'rotateY(180deg)';
          this.$refs.warp.style.transform = 'rotateY(180deg)';
        });
      } else if (distanceToTop < 300 && distanceToRight > 500) {
        this.$nextTick(() => {
          this.$refs.warp_bottom1.style.transform = 'rotateX(180deg)';
          this.$refs.warp.style.transform = 'rotateX(180deg)';
        });
      } else if (distanceToRight < 500 && distanceToTop < 300) {
        this.$nextTick(() => {
          this.$refs.warp_bottom1.style.transform = 'rotate(180deg)';
          this.$refs.warp_bottom1.style.transform = 'rotateY(180deg)';
          this.$refs.warp.style.transform = 'rotate(180deg)';
          this.$refs.warp.style.transform = 'rotateY(180deg)';
        })
      } else {
        this.$nextTick(() => {
          this.$refs.warp_bottom1.style.transform = '';
          this.$refs.warp.style.transform = '';
        })
      }
      setInterval(() => {
        this.warpVisible = true;
      }, 100);
    },
  },
  mounted() {
    window.vm = this;
    this.init()
    document.body.addEventListener('click', this.handleClick);
    const triangleElements = this.$el.querySelectorAll('.triangle');
    triangleElements.forEach((triangle, index) => {
      triangle.style.animationDelay = index * 0.05 + 's';
    });
    const triangleElements1 = this.$el.querySelectorAll('.leftdiv span');
    triangleElements1.forEach((triangle, index) => {
      // 设置动画延迟
      triangle.style.animationDelay = index * 0.05 + 's';
    });

  },
  beforeDestroy() {
    document.body.removeEventListener('click', this.handleClick);
  },
}
</script>

<style scoped>
ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

li {
  display: flex;
  /* padding: 0 10px; */
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  line-height: 40px;
}

.triangle {
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 6px 10px 6px;
  border-color: transparent transparent #ffe1b9 transparent;
  margin-right: 5px;
  transform: rotate(90deg);

}


.leftdiv span {



  /* 应用动画效果，时间可以根据需要调整 */
}

.list-item {
  display: flex;
  align-items: center;
}

.triangle {
  margin-right: 5px;
  /* 调整 triangle 和 span 之间的间距 */
}

/* 其他你已有的样式可以保留 */
</style>